<template>
  <div class="header-view">
    <div class="logo" @click="goHome">
      <img src="~img/logo.png" alt="" />
    </div>
    <div class="logo-title" @click="goHome">
      <img src="~img/logo-title.png" alt="" />
    </div>
    <div class="nav-view">
      <div class="nav" @click="goHome">首页</div>
      <div class="nav" v-for="(item, index) of navList" :key="index" @click="clickNav(index)">
        {{ item.cate_name }}
        <transition name="el-zoom-in-center">
          <img src="~img/header-nav-bg.png" alt="" v-show="navIndex === index" />
        </transition>
      </div>
      <div class="login-btn" v-if="token == ''" @click="openLogin">注册/登录</div>
      <div class="login-btn" v-else @click="logout">退出登录</div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  data() {
    return {
      token: '',
      navIndex: null,
      navList: []
    }
  },
  computed: {
    ...mapGetters(['topCate'])
  },
  mounted() {
    this.token = this.TOKEN
    this.navList = this.topCate
    this.$nextTick(() => {
      this.navIndex = this.topCate.findIndex(item => item.article_cate_id == this.$route.query.id)
    })
  },
  methods: {
    clickNav(i) {
      if (this.navIndex !== i) {
        this.$router.goto({
          path: '/articleList',
          query: {
            id: this.navList[i].article_cate_id
          }
        })
      }
    },
    goHome() {
      this.$router.goto({
        path: '/'
      })
    },
    openLogin() {
      this.eventBus.$emit('openLogin')
    },
    logout() {
      this.$message({
        message: '退出登录',
        type: 'success'
      })
      this.COMMON.removeStorage('token')
      setTimeout(() => {
        window.location.reload()
      }, 800)
    }
  }
}
</script>

<style lang="less" scoped>
.header-view {
  width: 100%;
  height: 120px;
  z-index: 9;
  background: #362d22;
  .logo {
    width: 53px;
    height: 53px;
    position: absolute;
    top: 44px;
    left: 52px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .logo-title {
    width: 704px;
    height: 69px;
    position: absolute;
    top: 36px;
    left: 105px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .nav-view {
    height: 42px;
    position: absolute;
    top: 52px;
    right: 40px;
    overflow: hidden;
    .nav {
      float: left;
      width: 103px;
      height: 34px;
      line-height: 34px;
      text-align: center;
      color: #fff;
      font-size: 20px;
      margin-right: 22px;
      cursor: pointer;
      position: relative;
      margin-top: 4px;
      &:hover {
        img {
          opacity: 1;
        }
      }
      img {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        transition: all 0.2s linear;
        &.acitve {
          opacity: 1;
        }
      }
    }
    .login-btn {
      width: 126px;
      height: 42px;
      line-height: 42px;
      text-align: center;
      float: left;
      background: @base-color;
      color: #fff;
      font-size: 20px;
      border-radius: 4px;
      cursor: pointer;
    }
  }
}
</style>
